import { Link } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import * as _ from "lodash"
import * as React from "react"


const useTableOfContentsStyles = makeStyles(() => ({
  ul: {
    margin: 0,
    padding: 0,
    "& li": {
      listStyle: "none",
      marginBottom: "calc(1.5rem / 2)",
    },
  },
}))

interface TableOfContentsProps {
  location: string
  items: any
}

export default function TableOfContents(props: TableOfContentsProps) {
  const { location, items } = props
  const classes = useTableOfContentsStyles()

  return (<>
    <h4>目录</h4>
    <ul className={classes.ul}>
      {items && _.map(items, item => (
        <li key={item.url}>
          <Link href={`${location}${item.url}`} children={item.title}/>
        </li>))}
    </ul>
  </>)
}
